<script lang="ts">
import {defineComponent} from 'vue'
import {useStore} from '@/store'
import HomeList from "@/views/home/components/homeList.vue";
import { useI18n } from 'vue-i18n'
import { IRoomListParams } from '@/api/interface'
// asyncData(){
//
// }
export default defineComponent({
  components:{
    HomeList
  },
  setup(){
    const { t } = useI18n()
    return { t }
  },
  //下面的已经将数据存入到了store中 怎么在html中显示出来呢
  asyncData({store,route}:any){//在服务端渲染即数据预取时，会遍历到当前组件存在asyncData函数，执行数据预取即action getRoomList
    const {pageNo} = store.state
    return store.dispatch('getRoomList',{pageNo} as IRoomListParams)
  }
})


</script>

<template>
  <div class="home-page">
    <!--  banner-->
    <div class="banner"></div>
    <!--  房屋列表-->
    <div class="main-wapper">
<!--      {{store.state.roomList}}-->
      <h2 class="title">{{ t('home.h2Title') }}</h2>
      <p class="sub-title">{{ t('home.subTitle') }}</p>
      <!--      首页列表-->
      <HomeList/>
    </div>
  </div>

</template>

<style lang="scss">
@import "@/assets/scss/home/index.scss";
</style>
